<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>
	Rounded Box Demo
	</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script>
		var tag1 = "animal";
		var tag2 = "car";
		var tag3 = "guitar";
		var tag4 = "video-game";

		var img1 = "http://farm2.static.flickr.com/1362/592039901_ac9ea22575_m.jpg";
		var img2 = "http://farm4.static.flickr.com/3530/3295294190_5efd9e1d8a_m.jpg";
		var img3 = "http://farm2.static.flickr.com/1414/1385229338_b7a7aeb6f7_m.jpg";
		var img4 = "http://farm4.static.flickr.com/3214/2837051558_5d3e648f26_m.jpg";

		function init()
		{
			var divTag1 = document.getElementById("cluster_1_label");
			var divTag2 = document.getElementById("cluster_2_label");
			var divTag3 = document.getElementById("cluster_3_label");
			var divTag4 = document.getElementById("cluster_4_label");
			divTag1.appendChild(document.createTextNode(tag1));
			divTag2.appendChild(document.createTextNode(tag2));
			divTag3.appendChild(document.createTextNode(tag3));
			divTag4.appendChild(document.createTextNode(tag4));

			var imgTag1 = document.getElementById("cluster_1_img");
			var imgTag2 = document.getElementById("cluster_2_img");
			var imgTag3 = document.getElementById("cluster_3_img");
			var imgTag4 = document.getElementById("cluster_4_img");
			imgTag1.src = img1;
			imgTag2.src = img2;
			imgTag3.src = img3;
			imgTag4.src = img4;
		} 

		function mouseOverImg1()
		{
			var imgTag2 = document.getElementById("cluster_2_img");
			var imgTag3 = document.getElementById("cluster_3_img");
			var imgTag4 = document.getElementById("cluster_4_img");
			imgTag2.src = img1;
			imgTag3.src = img1;
			imgTag4.src = img1;
		}
		
		function mouseOverImg2()
		{
			var imgTag1 = document.getElementById("cluster_1_img");
			var imgTag3 = document.getElementById("cluster_3_img");
			var imgTag4 = document.getElementById("cluster_4_img");
			imgTag1.src = img2;
			imgTag3.src = img2;
			imgTag4.src = img2;
		}
		
		function mouseOverImg3()
		{
			var imgTag1 = document.getElementById("cluster_1_img");
			var imgTag2 = document.getElementById("cluster_2_img");
			var imgTag4 = document.getElementById("cluster_4_img");
			imgTag1.src = img3;
			imgTag2.src = img3;
			imgTag4.src = img3;
		}
		
		function mouseOverImg4()
		{
			var imgTag1 = document.getElementById("cluster_1_img");
			var imgTag2 = document.getElementById("cluster_2_img");
			var imgTag3 = document.getElementById("cluster_3_img");
			imgTag1.src = img4;
			imgTag2.src = img4;
			imgTag3.src = img4;
		}
		
		function mouseOut()
		{
			var imgTag1 = document.getElementById("cluster_1_img");
			var imgTag2 = document.getElementById("cluster_2_img");
			var imgTag3 = document.getElementById("cluster_3_img");
			var imgTag4 = document.getElementById("cluster_4_img");
			imgTag1.src = img1;
			imgTag2.src = img2;
			imgTag3.src = img3;
			imgTag4.src = img4;
		}
	</script>
</head>
<body>	
<div class="rounded-box" id="igather_main">
  <div class="top-left-corner"><div class="top-left-inside">&bull;</div></div>
  <div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>
  <div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
  <div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</div></div>
    <div class="box-contents" id="igather_content">      
    <div class="title-text" id="search_tags">jaguar</div>
    <div class="cluster-table">
	  <div class="cluster-row">
		<div class="cluster-cell" style="height: 100px;"><div class="cluster-cell-decoration"><img id="cluster_1_img" onmouseout="mouseOut()" onmouseover="mouseOverImg1()" class="autosize" border="0" /></div></div>
		<div class="cluster-cell" style="height: 100px;"><div class="cluster-cell-decoration"><img id="cluster_2_img" onmouseout="mouseOut()" onmouseover="mouseOverImg2()" class="autosize" border="0" /></div></div>
	  </div>
	  <div class="cluster-row">
		<div class="cluster-cell" id="cluster_1_label" />		
	  </div>
		<div class="cluster-cell" id="cluster_2_label" />
	</div>
   </div>
   <br/>
      <div class="cluster-row">
        <div class="cluster-cell" style="height: 100px;"><div class="cluster-cell-decoration"><img id="cluster_3_img" onmouseout="mouseOut()" onmouseover="mouseOverImg3()" class="autosize" border="0" /></div></div>
		<div class="cluster-cell" style="height: 100px;"><div class="cluster-cell-decoration"><img id="cluster_4_img" onmouseout="mouseOut()" onmouseover="mouseOverImg4()" class="autosize" border="0" /></div></div>
      </div>
	  <div class="cluster-row">
		<div class="cluster-cell" id="cluster_3_label" />
	  </div>
		<div class="cluster-cell" id="cluster_4_label" />	  
</div>
<script type="text/javascript">init();</script>
</body>
</html>
